<template>
	<div>
		<slot name="header">
			<h4 class="headerCss">{{comLan.total}}:{{value.length}}</h4>
		</slot>
		<u-table ref="table" :data="value" :use-virtual="useVirtual" v-bind="$props" v-on="$listeners">
			<!-- row-key="OrganizationID"-->
			<slot name="operationBefore"></slot>
			<slot name="operation">
				<u-table-column label="" width="40px" :show-overflow-tooltip="false" :render-header="renderHeader"
					align="center">
					<template v-slot="scope">
						<i class="el-icon-minus" :title="comLan.btnDel" @click="del(scope)"
							style="cursor: pointer;"></i>
					</template>
				</u-table-column>
			</slot>
			<slot name="operationAfter"></slot>
			<slot name="indexBefore"></slot>
			<slot name="index">
				<u-table-column :label="comLan.showIndex" type="index" width="60"></u-table-column>
			</slot>
			<slot name="indexAfter"></slot>
			<slot name="HeaderUrlBefore"></slot>
			<slot name="HeaderUrl">
				<u-table-column prop="HeaderUrl" :label="keyLan['HeaderUrl']" width="150" align="left">
					<template v-slot="scope">
						<uploadimg v-model="scope.row.HeaderUrl" :max="1"></uploadimg>
					</template>
				</u-table-column>
			</slot>
			<slot name="HeaderUrlAfter"></slot>
			<slot name="NameBefore"></slot>
			<slot name="Name">
				<u-table-column prop="Name" :label="keyLan['Name']" width="150" align="left">
					<template v-slot="scope">
						<el-input v-model="scope.row.Name"></el-input>
					</template>
				</u-table-column>
			</slot>
			<slot name="NameAfter"></slot>
			<slot name="PhoneBefore"></slot>
			<slot name="Phone">
				<u-table-column prop="Phone" :label="keyLan['Phone']" width="150" align="left">
					<template v-slot="scope">
						<el-input v-model="scope.row.Phone"></el-input>
					</template>
				</u-table-column>
			</slot>
			<slot name="PhoneAfter"></slot>
			<slot name="AddressBefore"></slot>
			<slot name="Address">
				<u-table-column prop="Address" :label="keyLan['Address']" width="150" align="left">
					<template v-slot="scope">
						<el-input v-model="scope.row.Address"></el-input>
					</template>
				</u-table-column>
			</slot>
			<slot name="AddressAfter"></slot>
			<slot name="EnumStatusBefore"></slot>
			<slot name="EnumStatus">
				<u-table-column prop="EnumStatus" :label="keyLan['EnumStatus']" width="150" align="left">
					<template v-slot="scope">
						<el-select v-model="scope.row.EnumStatus" clearable style="width:120px;" :placeholder="keyLan['EnumStatus']">
							<el-option v-for="item in EnumStatus" :key="item.Value" :value="item.Value"
								:label="enumLanTxt(item.Label)">
							</el-option>
						</el-select>
					</template>
				</u-table-column>
			</slot>
			<slot name="EnumStatusAfter"></slot>
			<slot name="PwdBefore"></slot>
			<slot name="Pwd">
				<u-table-column prop="Pwd" :label="keyLan['Pwd']" width="150" align="left">
					<template v-slot="scope">
						<el-input v-model="scope.row.Pwd"></el-input>
					</template>
				</u-table-column>
			</slot>
			<slot name="PwdAfter"></slot>
			<slot name="RemarkBefore"></slot>
			<slot name="Remark">
				<u-table-column prop="Remark" :label="keyLan['Remark']" width="150" align="left">
					<template v-slot="scope">
						<el-input type="textarea" :rows="2" v-model="scope.row.Remark" style="width: 100%;"></el-input>
					</template>
				</u-table-column>
			</slot>
			<slot name="RemarkAfter"></slot>
		</u-table>
		<slot name="footer"></slot>
	</div>
</template>

<script>
	import common from "@/common/common.js";
	import js from "@/Partial/Organization/js.js";
	export default {
		name: "OrganizationListEdit",
		mixins: [common.baseVM, js],
		computed: {},
		data() {
			return {
				model: {
					HeaderUrl: null,
					Name: null,
					Phone: null,
					Address: null,
					EnumStatus: 1,
					Pwd: null,
					Remark: null,
				}
			}
		},
		methods: {
			renderHeader(h, data) {
				return h("div",
					[
						h("i", {
								attrs: {
									class: "el-icon-plus",
									title: this.comLan.btnAdd,
									style: "cursor: pointer;"
								},
								on: {
									click: () => {
										this.add();
									}
								}
							},
							[''])
					]);
			},
			add() {
				var newOne = JSON.parse(JSON.stringify(this.model));
				this.value.push(newOne);
			},
			del(scope) {
				var name = scope.row.Name;
				if (name == null) name = '';
				var msg = this.stringFormat(this.comLan.js["remove"], name);
				this.confirm(msg, () => {
					this.value.splice(scope.$index, 1);
				});
			}
		}
	}
</script>
